<template>
	<view>
		<u-popup :show="show" @close="close" @open="open" mode="right" :customStyle="{'width': '450rpx'}">
		<!-- 	<u-tag text="操作记录" type="error"></u-tag> -->
			<scroll-view scroll-y :style="scrollHeight">
				<view style="padding: 20rpx 20rpx 20rpx 20rpx;margin-bottom: 20rpx;">
					<u-text text="操作记录" type="success"></u-text>
					<!-- <view style="border: 1px solid #c7c7c7;margin-top: 20rpx;padding-top: 20rpx;padding-left: 20rpx;"> -->
					<view style="margin-top: 20rpx;padding-top: 20rpx;padding-left: 20rpx;">
						<up-steps :current="logList.length-1" direction="column" v-show="logList && logList.length>0">
							<up-steps-item v-for="(item,index) in logList" :title="item.operationType">
								<template #desc>
									<view
										:style="{'backgroundColor': item.userName == '园区人员' ? '#cfcfc6' : '#eee8aa','marginRight':'5rpx'}">
										<text
											style="margin-left: 10rpx;">{{ item.userName == '园区人员' ? '园区' : '供应链' }}</text>
									</view>
									<view style="border:1px solid #c7c7c7;margin-right: 5rpx;padding: 10rpx;">
										<view style="display: flex;">
											<up-icon name="clock"></up-icon>
											<text>：</text>
											<text style="color: #b9b9b9;font-size: 25rpx;">{{item.createDate}}</text>
										</view>
										<view style="display: flex;">
											<up-icon name="attach"></up-icon>
											<text>：</text>
											<text style="font-weight: bold;">{{item.records}}</text>
										</view>
										<view style="display: flex;">
											<up-icon name="account"></up-icon>
											<text>：</text>
											<text style="color: #b9b9b9;">{{item.userName}}</text>
										</view>
									</view>

								</template>
							</up-steps-item>
						</up-steps>
					</view>
				</view>
		    </scroll-view>
		</u-popup>
		

	</view>
</template>

<script>
	import orderApi from '@/apis/gyl/order.js';
	export default {
		props: {
			popupShow: {
				type: Boolean,
				default: false
			},
			id: {
				type: String
			},
			status: {
				type: String
			}
		},
		data() {
			return {
				show: this.popupShow,
				logList: [],
				scrollHeight: `height: ${uni.getSystemInfoSync().windowHeight * 1}px;`
			}
		},
		methods: {
			open() {},

			/**
			 * 关闭
			 */
			close() {
				this.show = false
				this.$emit("closeLog")
			},

			/**
			 * 日志
			 */
			async getLog() {
				const res = await orderApi.selectLogsByOrder({
					orderId: this.id,
					status: this.status
				})
				if (res.success && res.data && res.data.length > 0) {
					this.logList = res.data.reverse()
				}
			}
		},
		mounted() {
			this.getLog();
		}
	}
</script>

<style>
	.slot-icon {
		width: 21px;
		height: 21px;
		background-color: #7a7a7a;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		line-height: 21px;
		text-align: center;
	}
</style>